/*
    * @moudule:@/views/home/incomeOrder
    * @author:zengfx
    * @date:2020-10-28
    * 村社区级收入清单
 */

<template>
  <div class="incomeOrder_container">
    <el-form :inline="true" :model="formInline" class="main_searchBar">
      <el-form-item label="月份:">
        <el-date-picker size="mini" v-model="formInline.month" value-format="yyyyMM" type="month" placeholder="选择月" :picker-options="pickerOptions"></el-date-picker>
      </el-form-item>
      <el-form-item label="区域:">
        <dx-cascader :area_id.sync="formInline.areaId" ref="cascader" />
      </el-form-item>
      <el-form-item label="客户群:">
        <el-select size="mini" v-model="formInline.indexCode" style="width: 100px">
          <el-option v-for="(item, index) in customerList" :key="index" :label="item.indexName" :value="item.indexCode"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" @click="search()" type="primary" id="search_btn">查询</el-button>
        <el-button size="mini" type="success" id="export_btn" @click="handle_export">导出</el-button>
      </el-form-item>
    </el-form>
    <header>
      <p>村社区级收入清单</p>
    </header>
    <ux-grid
      size="mini"
      id="tablePx"
      ref="tablePx"
      :header-row-style="{ background: '#eef1f6' }"
      border
      :stripe="true"
      :widthResize="true"
      style="width: 100%"
      v-loading="showTableLoading"
      :height="height"
      show-overflow="tooltip"
      show-header-overflow="title"
    >
      <ux-table-column type="index" width="60" title="序号" fixed="left" align="center" />
      <ux-table-column fixed="left" field="c4_AREA_NAME" title="县级" min-width="120"></ux-table-column>
      <ux-table-column fixed="left" field="c5_AREA_NAME" title="分支局" min-width="120"></ux-table-column>
      <ux-table-column fixed="left" field="c6_NAME" title="片区" min-width="160"></ux-table-column>
      <ux-table-column field="c7_NAME" title="村/社区" min-width="140"></ux-table-column>
      <ux-table-column field="maintain_GROUP1" title="客户群" min-width="140"></ux-table-column>
      <!-- <ux-table-column field="cnt_RESIDENT" title="住户数" min-width="100"></ux-table-column> -->
      <ux-table-column field="cnt_CDMA" title="移动数" min-width="100"></ux-table-column>
      <ux-table-column field="cnt_KD" title="宽带数" width="100"></ux-table-column>
      <ux-table-column field="cnt_RK" title="其中：融合宽带" min-width="120"></ux-table-column>
      <ux-table-column field="cnt_RK_100" title="其中：融合宽带100M以下" min-width="140"></ux-table-column>
      <ux-table-column field="cnt_RK_300" title="其中：融合宽带100M(含)-300M" min-width="160"></ux-table-column>
      <ux-table-column field="cnt_RK_500" title="其中：融合宽带300M(含)-500M" min-width="180"></ux-table-column>
      <ux-table-column field="cnt_RK_999" title="其中：融合宽带500M(含)以上" min-width="140"></ux-table-column>
      <ux-table-column field="cnt_DK" min-width="140" title="其中：单宽"></ux-table-column>
      <ux-table-column field="cnt_DK_100" title="其中：单宽100M以下" min-width="140"></ux-table-column>
      <ux-table-column field="cnt_DK_300" title="其中：单宽100M(含)-300M" min-width="160"></ux-table-column>
      <ux-table-column field="cnt_DK_500" title="其中：单宽300M(含)-500M" min-width="180"></ux-table-column>
      <ux-table-column field="cnt_DK_999" title="其中：单宽500M(含)以上" min-width="140"></ux-table-column>
      <ux-table-column field="cnt_KD_CHAI" title="上月宽带拆机" min-width="140"></ux-table-column>
      <ux-table-column field="cnt_RK_CHAI" title="其中：融合拆机" min-width="140"></ux-table-column>
      <ux-table-column field="cnt_DK_CHAI" title="其中：单宽拆机" min-width="140"></ux-table-column>
      <ux-table-column field="cnt_ITV" min-width="140" title="ITV数"></ux-table-column>
      <ux-table-column field="cnt_GH" min-width="140" title="固话数"></ux-table-column>
      <ux-table-column field="t0_AMT" min-width="140" title="上月收入"></ux-table-column>
      <ux-table-column field="t1_AMT" min-width="140" title="本月收入"></ux-table-column>
      <ux-table-column field="t10_AMT" min-width="140" title="环比净增"></ux-table-column>
      <ux-table-column field="t10_CZ" min-width="140" title="其中：出账"></ux-table-column>
      <ux-table-column field="t10_FT" min-width="140" title="其中：分摊"></ux-table-column>
      <ux-table-column field="t10_TZ" min-width="140" title="其中：调账"></ux-table-column>
      <ux-table-column field="t10_QF" min-width="140" title="其中：欠费"></ux-table-column>
      <ux-table-column field="t10_HS" min-width="140" title="其中：收回"></ux-table-column>
      <ux-table-column field="t10_ZS" min-width="140" title="其中：赠送"></ux-table-column>
      <ux-table-column field="t10_OOCP" min-width="140" title="其中：前台营收"></ux-table-column>
      <ux-table-column field="t10_QT" min-width="140" title="其他"></ux-table-column>
    </ux-grid>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formInline.pageNum"
        :page-sizes="[100, 200, 400, 800, 1600,10000]"
        :page-size="formInline.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { $budgetAPI, $budget } from "@/api";
import {
  setSessionStorage,
  getSessionStorage,
  removeSessionStorage,
} from "@/common/js/storage";
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  data() {
    return {
      // pageSize: 20,
      // currentPage: 1,
      dataTotal: null,
      formInline: {
        areaId: "",
        month: "",
        customer: "",
        indexCode: "全量",
        pageNum: 1,
        pageSize: 100,
      },
      total: undefined,
      pickerOptions: this.pickerDisabled(),
      disabledTime: "",
      showTableLoading: false,
      height: window.innerHeight - 60 - 30 - 175,
      tableData: [],
      titleList: ["绍兴越城分局", "越城城中支局"],
      customerList: [
        {
          indexName: "全量",
          indexCode: "全量",
        },
        {
          indexName: "政企客户部",
          indexCode: "政企客户部",
        },
        {
          indexName: "公众客户群0-3星",
          indexCode: "公众客户群0-3星",
        },
        {
          indexName: "公众客户群4-7星",
          indexCode: "公众客户群4-7星",
        },
      ],
    };
  },
  methods: {
    getHeight() {
      this.height = window.innerHeight - 60 - 30 - 175;
    },
    handleSizeChange(val) {
      this.formInline.pageSize = val;
      this.getInitList();
    },
    handleCurrentChange(val) {
      this.formInline.pageNum = val;
      this.getInitList();
    },
    getMonth() {
      var that = this;
      return new Promise((resolve) => {
        $budgetAPI.incomeKeepRegionalMonth(
          { maximum: 5 },
          (res) => {
            if (res.code == 0) {
              resolve(res.content);
            }
          },
          (err) => {
            console.log(err);
          }
        );
      });
    },
    pickerDisabled() {
      let self = this;
      return {
        disabledDate(time) {
          if (self.disabledTime) {
            var timeyear = time.getFullYear();
            var timemonth = time.getMonth() + 1;
            if (timemonth >= 1 && timemonth <= 9) {
              timemonth = "0" + timemonth;
            }
            var currentdate = timeyear.toString() + timemonth.toString();
            if (currentdate > self.disabledTime) {
              return true;
            }
          }
        },
      };
    },
    async initData() {
      var that = this,
        month,
        customer,
        obj = {};
      month = await that.getMonth();
      // customer = await that.getCustomerGroup();
      // that.customerList = customer;

      that.formInline.month = month;
      that.disabledTime = month;
      that.formInline.customer = "";

      obj = {
        areaId: that.formInline.areaId,
        custerCode: "",
      };
      that.getInitList(obj);
    },
    // 初始化列表接口
    getInitList(obj) {
      // console.log(obj, "333");
      this.showTableLoading = true;
      $budgetAPI.incomeOrder(
        this.formInline,
        (res) => {
          if (res.code == 0) {
            this.tableData = res.content.data;
            this.total = res.content.total;
            this.$refs.tablePx.reloadData(this.tableData);
          } else {
            this.tableData = [];
            this.$refs.tablePx.reloadData([]);
            this.total = 0;
          }
          this.showTableLoading = false;
        },
        (err) => {
          console.log(err);
        }
      );
      // 接口
      // this.spanArr = this.mergeSpan(this.tableData, ['class1', 'class2', 'indexName']);
    },
    getCustomerGroup() {
      var that = this;
      return new Promise((resolve) => {
        $budgetAPI.getCustomerGroup(
          {},
          (res) => {
            if (res && res.code == 0) {
              resolve(res.content);
              console.log("111");
            }
          },
          (err) => {}
        );
      });
    },
    mergeSpan(tableData, arr) {
      let spanArr = new Array(tableData.length);
      for (let m = 0; m < spanArr.length; m++) {
        spanArr[m] = new Array(arr.length);
      }
      arr.forEach((ele, ind) => {
        let pos = null;
        tableData.forEach((item, index, self) => {
          if (index == 0) {
            spanArr[index][ind] = {
              rowspan: 1,
              colspan: 1,
            };
            pos = 0;
          } else {
            if (item[ele] === self[index - 1][ele]) {
              spanArr[pos][ind].rowspan += 1;
              spanArr[index][ind] = {
                rowspan: 0,
                colspan: 0,
              };
            } else {
              pos = index;
              spanArr[index][ind] = {
                rowspan: 1,
                colspan: 1,
              };
            }
          }
        });
      });
    },
    search() {
      this.getInitList();
    },
    handle_export() {
      let fields = {
        c4_AREA_NAME: "县级",
        c5_AREA_NAME: "分支局",
        c6_NAME: "片区",
        c7_NAME: "村/社区",
        maintain_GROUP1: "客户群",
        cnt_CDMA: "移动数",
        cnt_KD: "宽带数",
        cnt_RK: "其中：融合宽带",
        cnt_RK_100: "其中：融合宽带100M以下",
        cnt_RK_300: "其中：融合宽带100M(含)-300M",
        cnt_RK_500: "其中：融合宽带300M(含)-500M",
        cnt_RK_999: "其中：融合宽带500M(含)以上",
        cnt_DK: "其中：单宽",
        cnt_DK_100: "其中：单宽100M以下",
        cnt_DK_300: "其中：单宽100M(含)-300M",
        cnt_DK_500: "其中：单宽300M(含)-500M",
        cnt_DK_999: "其中：单宽500M(含)以上",
        cnt_KD_CHAI: "上月宽带拆机",
        cnt_RK_CHAI: "其中：融合拆机",
        cnt_DK_CHAI: "其中：单宽拆机",
        cnt_ITV: "ITV数",
        cnt_GH: "固话数",
        t0_AMT: "上月收入",
        t1_AMT: "本月收入",
        t10_AMT: "环比净增",
        t10_CZ: "其中：出账",
        t10_FT: "其中：分摊",
        t10_TZ: "其中：调账",
        t10_QF: "其中：欠费",
        t10_HS: "其中：收回",
        t10_ZS: "其中：赠送",
        t10_OOCP: "其中：前台营收",
        t10_QT: "其他",
      };
      this.loading = this.$loading({
        lock: true,
        text: "导出中,数据量超大,请耐心等待",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      const { formInline } = this;
      $budgetAPI.incomeOrder(
        { ...formInline, pageNum: 1, pageSize: 999999 },
        (res) => {
          this.loading.close();
          if (res.code == 0) {
            let data = res.content.data;
            data.forEach((item) => {
              for (let i in item) {
                if (fields.hasOwnProperty(i)) {
                  item[fields[i]] = item[i];
                }
                delete item[i]; //删除原先的对象属性
              }
            });
            let workbook = XLSX.utils.book_new();
            let ws = XLSX.utils.json_to_sheet(data, {
              header: Object.values(fields),
            });
            XLSX.utils.book_append_sheet(workbook, ws, "村社区级收入清单");
            let wbOut = XLSX.write(workbook, {
              bookType: "xlsx",
              bookSST: true,
              type: "array",
            });
            try {
              FileSaver.saveAs(
                new Blob([wbOut], {
                  type: "application/octet-stream",
                }),
                "村社区级收入清单" + ".xlsx" //Demo.xlsx为导出的表格的名称
              );
            } catch (e) {
              if (typeof console !== "undefined") console.log(e, wbOut);
            }
            return wbOut;
          }
        },
        (err) => {
          this.loading.close();
        }
      );
    },
  },
  created() {
    this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
    this.formInline.areaId = this.accountInfo.areaId;
    this.initData();
    window.addEventListener("resize", this.getHeight);
  },
  destroyed() {
    // 计算高度
    window.removeEventListener("resize", this.getHeight);
  },
};
</script>

<style lang="scss" scoped>
.incomeOrder_container {
  width: 100%;
  height: 100%;
  & > header {
    font-size: 16px;
    margin-bottom: 10px;
  }
  .page_box {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
